<template>
  <div class="index">
    <van-tabs v-model="activeIndex" >
    <van-tab v-for='channel in channels' :key="channel.id" :title="channel.name">
      <div class="scroll-wrapper">
        <!-- 文章组件 -->
      <article-list @showMoreAction="hShow" :channel='channel'></article-list>
      </div>
      </van-tab>
  </van-tabs>
  <!-- 频道按钮 -->
  <div class="bar-btn" @click="showChannelEdit=true" v-if='$store.state.tokenInfo.token'>
        <van-icon name="wap-nav" size="20" />
      </div>
  <van-popup v-model="show" :style="{ width: '80%' }">
    <!-- 隐藏框组件 -->
    <more-action @dislike="hDislike" @reports="hReport"></more-action>
  </van-popup>
  <van-action-sheet v-model="showChannelEdit" >
    <channel-edit :channels="channels"
    @updateCurChannel="hUpdateCurChannel"
    :activeIndex='activeIndex'></channel-edit>
    </van-action-sheet>
  </div>
</template>
<script>
import { getChannels, getAllChannels } from '@/api/channel'
import { dislikeArticle, reportArticle } from '@/api/article'
import moreAction from './moreAction'
import ArticleList from './article'
import ChannelEdit from './channelEdit'
export default {
  name: 'home-page',
  components: {
    ArticleList,
    moreAction,
    ChannelEdit
  },
  data () {
    return {
      // 当前tabs中 处于活动状态的是哪一个下标
      activeIndex: 0,
      articleId: null,
      channels: [],
      show: false,
      showChannelEdit: false
    }
  },
  created () {
    this.loadChannels()
  },
  methods: {
    hUpdateCurChannel (channel) {
      // 关闭弹窗
      this.showChannelEdit = false
      // 切换到这个频道
      const idx = this.channels.findIndex(item => item.id === channel.id)
      this.activeIndex = idx
    },
    // 封装通过事件总线去发布一个消息 告诉article组件 删除对应的文章
    delArticle () {
      const eventObj = {
        // 文章id
        articleId: this.articleId,
        // 频道id 根绝索引值获取到频道的id值
        channelId: this.channels[this.activeIndex].id
      }
      // 用来发布事件  参数就是eventObj 包含着频道id 和文章id
      this.$eventBus.$emit('delArticle', eventObj)
    },
    // 处理用户在弹层中选择的 举报文章
    async hReport (reportTypeId) {
      // 1. 发送请求
      await reportArticle(this.articleId, reportTypeId)
      // 2. 关闭弹窗
      this.show = false
      // 3. 删除文章
      this.delArticle()
    },
    // 处理弹窗中选择的 不感兴趣
    async hDislike () {
      // 关闭弹窗
      this.show = false
      // 将不喜欢的文章id 传给后端处理
      await dislikeArticle(this.articleId)
      // 将list中的数据中 用户点记得数据进行删除掉
      this.delArticle()
    },
    // 接收点×文章的id值
    hShow (articleId) {
      this.show = true
      this.articleId = articleId
    },
    // 获取频道数据
    async loadChannels () {
      if (this.$store.state.tokenInfo.token) {
        const res = await getChannels()
        this.channels = res.data.data.channels
      } else {
        const res = await getAllChannels()
        this.channels = res.data.data.channels
      }
    }
  }
}
</script>
<style lang='less' scoped>
  .bar-btn {
    position: fixed;
    right:5px;
    top:57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 1;
    z-index: 1
  }
</style>
